<template>
	<view class="app-container">
		<view class="view-content" :style="mystyle">
				<view>666666</view>
				<view>666666</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>123123</view>
				<view>888888</view>
				<view class="box"></view>
		</view>
		<view class="input">
			<input type="text" placeholder="内容" @focus="handleFocus" @blur="handleBlur" @keyboardheightchange="handleChange">
			<view>发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mystyle:{
					padding: '0',
				}
			}
		},
		methods:{
			handleChange(e) {
				console.log(e,'eeee');
				if(e.detail.height > 0) {
					this.mystyle.padding = '340px 0 0'
				}else {
					this.mystyle.padding = '0'
				}
			},
			handleFocus() {
				// this.mystyle.padding = '340px 0 60px'
			},
			handleBlur() {
				// this.mystyle.padding = '0'
			}
		}
	}
</script>

<style>
	.view-content{
		background-color: red;
	}
	.box{
		height: 50px;
		background-color: #007AFF;
	}
	.input{
		background-color: #fff;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.input input{
		height: 50px;
	}
</style>